// 固定栏目
<template>
  <div class="entrance">
      <div class="scroller">
          <div class="wrap">
              <!-- <div class="item">
                  <img data-v-3abe5fb5="" src="https://cms.34580.cn/prod/dc95ec73c6dd96e11852687576cc85b3.gif"mode="aspectFill" class="img">
                  <div data-v-3abe5fb5="" style="color: rgb(87, 87, 87);">蔬菜豆菇</div>
              </div> -->
              <div v-for='(item,index) in fixedColumns.configInfoList' :key="index" class="item">
                  <img :src="item.pic" alt="">
                  <div data-v-3abe5fb5="" style="color: rgb(87, 87, 87);">{{item.title}}</div>
              </div>
          </div>
      </div>
      <div class="indicator">
          
      </div>
  </div>
</template>

<script>


import axios from "axios"
export default {
    data(){
        return{
            fixedColumns:[]

        }
    },
async created(){
    // 数据
    let dataOf = await axios.get(
        "https://api1.34580.com/sz/home/getHomeInfo?platform=1500&sourcetype=9&accesstoken=&customerguid=&stationId=2141&channelID=0"
    )
    // console.log(dataOf.data.Data.floorInfoList[2]);
    this.fixedColumns = dataOf.data.Data.floorInfoList[2]
    // console.log(this.fixedColumns); 
} 
}
</script>

<style lang="stylus" scoped>
.entrance
    position relative
    background-color #fff
    >.indicator
        height 4px
        width 32px
        margin 0 auto
        margin-top 10px
        background-color #ddd
    >.scroller
        width 100%
        padding-bottom 2px
        overflow hidden
        overflow-x scroll
        >.wrap
            display flex
            flex-direction column
            justify-content flex-start
            align-items flex-start
            flex-wrap wrap
            height 154px
            >.item
                z-index 10
                flex none
                width 20%
                box-sizing border-box
                padding 3px
                margin-bottom 4px
                display flex
                flex-direction column
                justify-content flex-start
                align-items center
                >div
                    font-size 12px
                    line-height 16px
                    text-align center
                    white-space nowrap
                    overflow hidden
                    text-overflow clip
                    width 100%
                >img
                    width .47rem
                    height .47rem
                    margin-bottom 4px
                    
                        
</style>